<template>
  <div class="keyboard">
    <div class="keyboard-grid">
      <panel-button
        v-for="(btn, index) in buttons"
        :key="index"
        :label="btn.main"
        :sub-label="btn.sub"
        :icon="btn.icon"
        :sub-icon="btn.subIcon"
        color="white"
        :wrap="false"
        :action="btn.action"
        :disabled="btn.disabled"
      />
    </div>
  </div>
</template>

<script>
import PanelButton from "../FunctionButton.vue";

export default {
  components: { PanelButton },
  data() {
    return {
      buttons: [
        { main: "1", sub: ". ，", action: "1", disabled: true },
        { main: "2", sub: "ABC", action: "2", disabled: true },
        { main: "3", sub: "DEF", action: "3", disabled: true },
        { main: "4", sub: "GHI", action: "4", disabled: true },
        { main: "5", sub: "JKL", action: "5", disabled: true },
        { main: "6", sub: "MNO", action: "6", disabled: true },
        { main: "7", sub: "PQRS", action: "7", disabled: true },
        { main: "8", sub: "TUV", action: "8", disabled: true },
        { main: "9", sub: "WXYZ", action: "9", disabled: true },
        {
          main: "",
          icon: "iconfont asterisks-1-copy",
          sub: "",
          subIcon: "iconfont mima1",
          action: "star",
          disabled: true,
        },
        {
          main: "0",
          subIcon: "iconfont kongge",
          sub: "",
          action: "0",
          disabled: true,
        },
        {
          main: "#",
          subIcon: "iconfont kongxinshangjiantou",
          sub: "",
          action: "pound",
          disabled: true,
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.keyboard {
  width: 100%;
  height: 100%;
  //   background-color: #222;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8%;
  box-sizing: border-box;
}

.keyboard-grid {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 10%;
}
</style>